import { createApp } from 'vue'
import { createPinia } from 'pinia'
import Antd from 'ant-design-vue'
import enUS from 'ant-design-vue/es/locale/en_US'
import App from './App.vue'
import router from './router'
import 'ant-design-vue/dist/reset.css'
import './assets/styles/main.css'

// Configure dayjs
import dayjs from 'dayjs'
import 'dayjs/locale/en'
import relativeTime from 'dayjs/plugin/relativeTime'
import duration from 'dayjs/plugin/duration'

dayjs.extend(relativeTime)
dayjs.extend(duration)
dayjs.locale('en')

const app = createApp(App)
const pinia = createPinia()

// Simple persistence plugin
pinia.use(({ store }) => {
  const storageKey = `pinia-${store.$id}`

  // Restore state from localStorage
  const savedState = localStorage.getItem(storageKey)
  if (savedState) {
    try {
      store.$patch(JSON.parse(savedState))
    } catch (e) {
      console.error('Failed to restore state:', e)
    }
  }

  // Save state changes to localStorage
  store.$subscribe((mutation, state) => {
    localStorage.setItem(storageKey, JSON.stringify(state))
  })
})

app.use(pinia)
app.use(router)
app.use(Antd)

// Set Ant Design Vue locale to English
app.provide('localeProvider', enUS)

app.mount('#app')
